<template>
    <el-dialog
        :title="title"
        custom-class="el-dialog-600"
        :visible.sync="visible"
    >
        <el-form
            :model="form"
            :rules="rules"
            :ref="formRef"
            label-width="80px"
            :size="$formSize"
        >
            <el-form-item label="站名" prop="title">
                <el-col :span="18">
                    <el-input
                        clearable
                        v-model="form.title"
                        auto-complete="off"
                        placeholder="请输入网站名称"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
                <el-col :span="18">
                    <el-input
                        clearable
                        v-model="form.email"
                        placeholder="请输入站点联系邮件"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="友链网址" prop="url">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.url"
                        auto-complete="off"
                        placeholder="请输入网站地址"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="网站图标" prop="image_url">
                <Uploader
                    v-model="form.image_url"
                    :on-success="thumbUpload"
                    :on-remove="removeThumbUpload"
                />
            </el-form-item>

            <el-form-item label="描述" prop="desc">
                <el-col :span="23">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form.desc"
                    >
                    </el-input>
                </el-col>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false">
                取 消
            </el-button>
            <el-button
                type="primary"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit()"
            >
                确 认
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { adminLink as Api } from "api";

export default {
    props: {
        id: {
            type: [Number, String],
        },
    },
    data() {
        // 电子邮件验证
        const checkEmail = (rule, value, callback) => {
            if (this.$validate.isEmail(value) || value == "") {
                callback();
            } else {
                return callback(new Error("请输入正确的电子邮件"));
            }
        };

        // 域名验证
        const checkURL = (rule, value, callback) => {
            if (this.$validate.isURL(value) || value == "") {
                callback();
            } else {
                return callback(new Error("请输入正确的域名"));
            }
        };

        return {
            // 状态
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            title: "", // 标题

            // 表单
            formRef: "formRef", // ref

            form: {
                title: "",
                image_url: "",
                desc: "",
                url: "",
                email: "",
            },

            rules: {
                title: [
                    {
                        required: true,
                        message: "网站名不能空",
                        trigger: "change",
                    },
                ],
                url: [
                    {
                        required: true,
                        message: "网站地址不能空",
                        trigger: "change",
                    },
                    { validator: checkURL, trigger: "change" },
                ],
                email: [
                    {
                        required: true,
                        message: "网站邮箱不能空",
                        trigger: "change",
                    },
                    { validator: checkEmail, trigger: "change" },
                ],
            },
        };
    },
    methods: {
        /**
         * 初始化
         */
        init() {
            this.title = this.id ? "编辑" : "新增";

            if (this.id) this.getById();
        },

        async getById() {
            const { code, msg, data } = await this.$axios.get(Api.getById, {
                params: { id: this.id },
            });
            
            if (code == 200) {
                this.form = {
                    title: data.title,
                    image_url: data.image_url,
                    desc: data.desc,
                    url: data.url,
                    email: data.email,
                };
            }
        },

        /* 图标上传 */
        thumbUpload(fileStr) {
            this.form.image_url = fileStr;
        },

        /* 删除图标 */
        removeThumbUpload(fileStr) {
            this.form.image_url = fileStr;
        },

        /* 提交 */
        async onSubmit() {
            this.$refs[this.formRef].validate((valid) => {
                if (valid) {
                    this.loading = true;
                }
            });

            if (this.loading) {
                let url = this.id ? Api.update : Api.add;

                let params = {
                    title: this.form.title,
                    email: this.form.email,
                    url: this.form.url,
                    image_url: this.form.image_url,
                    desc: this.form.desc,
                };

                if (this.id) params.id = this.id;

                const { code, msg, data } = await this.$axios.post(url, params);

                if (code === 200) {
                    this.$msg.success(msg);
                    this.$parent.getList();

                    this.visible = false;
                } else {
                    this.$msg.error(msg ? msg : data);
                }

                this.loading = false;
            }
        },
    },
    watch: {
        visible(status) {
            status ? this.init() : this.$refs[this.formRef].resetFields();
        },
    },
};
</script>